<template>
	<view class="modifyName">
		<view class="content">
			<view class="title">{{status == 'wxNumber'?'修改微信名':'修改昵称'}}</view>
			<view class="maxlength">{{status == 'wxNumber'?'微信名':'昵称'}}最多20个字。</view>
			<input v-model="nickName" type="text" class="inputBox" maxlength="20" :placeholder="status == 'wxNumber'?'请输入微信名':'请输入昵称'" placeholder-style="color:#CACCCC">
		</view>
		<view class="btn" @click="sureEdit">确认修改</view>
	</view>
</template>

<script setup lang="ts">
	import { ref  } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import api from '@/api'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo } = useUserStoreToRefs()
	const nickName = ref('')
	const status = ref()
	onLoad((params) => {
		status.value = params.type
		status.value =='wxNumber'?nickName.value = userInfo.value.wxNumber:nickName.value = userInfo.value.nickName
	})
	
	const sureEdit = async () => {
		if (nickName.value == '' || !nickName.value) {
			uni.showToast({
				title: status.value =='wxNumber'? '请填写微信名' : '请填写昵称',
				icon: 'none'
			});
			return false
		}
		let res
		if(status.value =='wxNumber'){
			//修改微信名
			res = await api({
				method: 'put',
				url: `/mall/user/updateWxNumber`,
				data:{
					wxNumber:nickName.value
				}
			})
		}else{
			//修改昵称
			res = await api({
				method: 'put',
				url: `/mall/user/updateNickName`,
				data:{
					nickName:nickName.value
				}
			})
		}
		console.log(res)
		if (res.code !== 0) {
			uni.showToast({
				icon: 'none',
				mask: true,
				title: res.msg
			})
			return false
		}else{
			uni.showToast({
				icon: 'none',
				mask: true,
				title: '修改成功'
			})
			setTimeout(() => {
				uni.navigateBack()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
.modifyName{
	height: 100vh;
	background-color: #F9F6F6;
	padding: 32rpx;
	box-sizing: border-box;
	.content{
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background-color: #fff;
		.title{
			font-weight: bold;
			color: #1A1A1A;
			font-size: 32rpx;
		}
		.maxlength{
			color: #7C807F;
			font-size: 28rpx;
			margin: 16rpx 0 32rpx;
		}
		.inputBox{
			background: #F9F6F6;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			height: 104rpx;
			padding-left: 32rpx;
			font-size: 30rpx;
			color: #1B2120;
		}
	}
	.btn{
		background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
		border-radius: 62rpx 62rpx 62rpx 62rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #fff;
		letter-spacing: 2rpx;
		margin-top: 24rpx;
	}
}	
</style>